<template>
    <div class="hello user-form">
        <div class="user-info">
            <img :src="headimgurl" />
            <div class="user-info-name">
                <a class="user-fit" @click="boun"></a> 
                <a></a>
                <p>{{user.nickname}}</p>
                <span v-if="user.vip == 0" class="user-info-name_p"><i></i> <em>普通会员</em></span>
                <span v-if="user.vip == 1" class="user-info-name_p"><i></i> <em>付费会员</em></span>
                <a v-if="user.vip == 0" @click="switchTo('/openVip')" class="vipImg">去开通vip</a>
                <a v-if="user.vip == 1" class="vipImg">{{user.expired}}</a>
                
            </div>
        </div>
        <div class="user-price">
            <span @click="switchTo('/UserMoney')"><em>{{user.money}}</em>我的钱包</span>
            <span @click="switchTo('/UserIntegral')"><em>{{user.integral}}</em>我的积分</span>
            <span @click="switchTo('/OrderCart')"><em>{{user.cart}}</em>购物车</span>
        </div>
        <div class="common-form">
            <p class="myOrder">我的订单</p>
            <div class="user-mine">
                <a @click="switchTo('/UserOrder')">
                    <p><i></i>我的积分</p>
                </a>
                <a  @click="switchTo('/SpikeOrderList')">
                    <p><i></i>我的秒杀</p>
                </a>
                <a  @click="switchTo('/UserCollection')">
                    <p><i></i>我的收藏</p>
                </a>
                <a  @click="switchTo('/vipOrderList')">
                    <p><i></i>会员订单</p>
                </a>
                <a @click="assMyOrder">
                    <p><i></i>我的拼团</p>
                </a>
                <a   @click="boun">
                    <p><i></i>我的砍价</p>
                </a>
            </div>
        </div>
        <div class="common-form">
            <div class="user-more">
                <a @click="switchTo('/Login')" v-if=" status == 400"><i></i>绑定手机号</a>
                <a @click="switchTo('/changePhone')" v-else><i></i>换绑手机号</a>
                <a @click="switchTo('/Join')"><i></i>商家入驻</a>
                <a  @click="boun"><i></i>常见问题</a> 
                <a  @click="boun"><i></i>关于我们</a>
            </div>
        </div>
        <div class="footer-100"></div>
    </div>
</template>


<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
import wx from 'weixin-jsapi'
import {formatDate} from '../../../../static/data.js';
export default {
    name: 'UserHeader',
    data () {
        return {
            status:'',
            headimgurl:'',
            user:{
                money:'',
                integral:'',
                nickname:'',
                vip:'',
                cart:'',
                expired:'',
            },
        }
    },
    
  methods:{
    switchTo(path){
      // console.log(this.$router)
      this.$router.push(path)
    },
    // 该功能暂未开放
    boun:function(){
        layer.open({
            content: '该功能暂未开放'
            ,btn: '我知道了'
        });
    },
    
    getphone:function(){
        var that = this
        var openid = localStorage.getItem("openid")
        let phone =  that.$qs.stringify({
            openid: openid,
        });
        axios({
            method: "post",
            url: "/index/user/is_addphone",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            data: phone
        }).then(res => {
            console.log(res);
            this.status = res.data.status
        });
    },
    getuser:function(){
        var that = this
        var uo = url.parse(window.location.href, true)
        console.log(uo)
        var openid = localStorage.getItem("openid")
        let pageList = that.$qs.stringify({
            openid: openid,
        });
        axios({
            method: "post",
            url: "/index/user/UserInfo",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            data: pageList
        }).then(res => {
            console.log(res);
            
            res.data.expired = formatDate(new Date(res.data.expired * 1000), 'yyyy-MM-dd')

            this.user.money = res.data.balance,
            this.user.integral = res.data.integral,
            this.user.nickname = res.data.nickname,
            this.user.vip = res.data.vip,
            this.user.cart = res.data.cart,
            this.headimgurl = res.data.headimgurl,
            this.user.expired = res.data.expired
        });
    },
    assMyOrder(){
      this.$router.push({name:'AssMyOrder'})
    },
  },
  mounted(){
      this.getuser(),
      this.getphone()
  }
}
</script>

<style scoped>
.vipImg{
    margin-top: 8px;
    color: #FFF;
    display: inline-block;
    margin-left: 9px;
    line-height: 20px;
}
.myOrder{
    padding: 10px 0;
    border-bottom: 1px solid #CCC;
    width: 94%;
    display: inline-block;
    margin-left: 3%;
}
.user-news{
	display: block;
    height: 21px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/tong.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    vertical-align: middle;
    margin-top: 2px;
    float: right;
}
.user-fit{
	display: block;
    height: 21px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/fit.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    vertical-align: middle;
    margin-top: 2px;
    float: right;
    margin-left: 10px;
}

.user-order em{
    font-size:12px;
    margin-top:8px;
}
.user-info-name-more{
    float:right;
}
.user-price{
    width:94%;
    display: inline-block;
    margin:3%;
}
.user-price span{
    width:33.33%;
    float: left;
    text-align: center;
    color:#FFF;
}
.user-price em{
    width:100%;
    text-align: center;
    display: inline-block;
}
.user-info{
    width: 94%;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 10px;
    display: inline-block;
    margin-left: 3%;
}
.user-info-name{
	float: left;
	width:81%;
	margin-left: 3%;
}
.user-info-name p:nth-child(3){
	color:#FFF;
	font-weight: 600;
	font-size:16px;
}
.user-info-name_p{
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.17);
    margin-top: 8px;
    padding: 2px 10px;
    display: inline-block;
    float: left;

}
.user-info-name_p em{
	color:#FFF;
	font-size:12px;
	float: left;
}
.user-info-name_p i{
	display: block;
    height: 14px;
    width: 13px;
    overflow: hidden;
    background: url(../../../assets/user.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    vertical-align: middle;
    margin-top: 2px;
    float: left;
}
.user-info img{
	width:50px;
	height:50px;
	border-radius: 50%;
	float: left;
}
.user-mine{
	padding:2% 3%;
}
.user-mine p{
	height:38px;
	line-height: 38px;
}
.user-mine a:nth-child(1) i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user1.png) no-repeat;
    background-size: 100%;
    margin-top: 8px;
    float: left;
    margin-right: 10px;
}

.user-mine a:nth-child(2) i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user2.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}

.user-mine a:nth-child(3) i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user3.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.user-mine a:nth-child(4) i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user4.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.user-mine a:nth-child(5) i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user5.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.user-mine a:nth-child(6) i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user10.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.user-more{
	margin:2% 3%;
}
.user-more a{
	height:38px;
	line-height: 38px;
	width:100%;
	display: inline-block;
}
.user-img{
	width:94%;
	height:95px;
	display: inline-block;
	margin-left: 3%;
	border-radius: 5px;
	margin-top:10px;
}
.user-more a:nth-child(1) i{
    display: block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user6.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.user-more a:nth-child(2) i{
    display: block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user7.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.user-more a:nth-child(3) i{
    display: block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user8.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.user-more a:nth-child(4) i{
    display: block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/user9.png) no-repeat;
    background-size: 100%;
    margin-top: 10px;
    float: left;
    margin-right: 10px;
}
.user-order{
    padding: 3%;
    display: inline-block;
    width: 94%;
}
.user-order a{
	width:20%;
	text-align: center;
	float: left;
}
.user-order span{
    padding-bottom: 3%;
    border-bottom: 1px solid #f2f2f2;
    display: inline-block;
    width: 100%;
    font-weight: 600;
    margin-bottom: 10px;
}
.user-order span i{
	font-size:12px;
	color:#999;
	float: right;
	font-weight: normal;
	line-height: 20px;
}
.user-order a:nth-child(2) i{
    display: block;
    height: 26px;
    width: 24px;
    overflow: hidden;
    background: url(../../../assets/order-1.png) no-repeat;
    background-size: 100%;
    margin-left: 31%;
}
.user-order a:nth-child(3) i{
    display: block;
    height: 26px;
    width: 24px;
    overflow: hidden;
    background: url(../../../assets/order-1.png) no-repeat;
    background-size: 100%;
    margin-left: 31%;
}
.user-order a:nth-child(4) i{
    display: block;
    height: 26px;
    width: 24px;
    overflow: hidden;
    background: url(../../../assets/order-1.png) no-repeat;
    background-size: 100%;
    margin-left: 31%;
}
.user-order a:nth-child(5) i{
    display: block;
    height: 26px;
    width: 24px;
    overflow: hidden;
    background: url(../../../assets/order-1.png) no-repeat;
    background-size: 100%;
    margin-left: 31%;
}
.user-order a:nth-child(6) i{
    display: block;
    height: 26px;
    width: 24px;
    overflow: hidden;
    background: url(../../../assets/order-1.png) no-repeat;
    background-size: 100%;
    margin-left: 31%;
}

</style>
